<template>
  <a-layout>
    <a-layout-content id="register-layout">
      <div
        id="register-main-layout"
        :style="{ width: mobile ? '350px' : '500px' }"
      >
        <a-form
          id="register-form-layout"
          :style="{ width: mobile ? '250px' : '500px' }"
          :form="form"
          :label-col="{ span: 8, offset: 1 }"
          :wrapper-col="{ span: 12 }"
          @submit="registSubmit"
          @submit.native.prevent
        >
          <!-- 联盟名称 -->
          <a-form-item label="联盟名称">
            <a-input
              v-decorator="[
                'nodeName',
                {
                  rules: [
                    { required: true, message: '请输入要申请的联盟名称' },
                  ],
                },
              ]"
              placeholder="请输入联盟名称"
            >
            </a-input>
          </a-form-item>
          <!-- 联盟类型 -->
          <a-form-item label="联盟类型">
            <a-select
              v-decorator="[
                'type',
                {
                  rules: [{ required: true, message: '请选择联盟类型' }],
                },
              ]"
              placeholder="请选择联盟类型"
            >
              <a-select-option :value="0"> 传统高职院校 </a-select-option>
              <a-select-option :value="1"> 社会教培机构 </a-select-option>
            </a-select>
          </a-form-item>
          <!-- 管理员名称 -->
          <a-form-item label="管理员名称">
            <a-input
              v-decorator="[
                'userName',
                {
                  rules: [
                    { required: true, message: '请输入要申请联盟管理员名称' },
                  ],
                },
              ]"
              placeholder="请输入管理员名称"
            >
            </a-input>
          </a-form-item>
          <!-- 联系电话 -->
          <a-form-item label="管理员联系电话">
            <a-input
              v-decorator="[
                'phone',
                {
                  rules: [
                    { required: true, message: '请输入联系电话' },
                    {
                      pattern: /^\d{11}$/,
                      message: '请输入有效联系电话',
                    },
                  ],
                },
              ]"
              placeholder="请输入联系电话"
            >
            </a-input>
          </a-form-item>
          <!-- 邮箱 -->
          <a-form-item label="管理员邮箱">
            <a-input
              v-decorator="[
                'email',
                {
                  rules: [
                    { required: true, message: '请输入邮箱账号' },
                    {
                      pattern: /^[\w-]+@[\w-]+(\.[\w-]+)+$/,
                      message: '请输入有效邮箱',
                    },
                  ],
                },
              ]"
              placeholder="请输入邮箱账号"
            >
            </a-input>
          </a-form-item>
          <!-- 验证码 -->
          <a-form-item label="邮箱验证码">
            <a-input
              style="float: left; width: 55%; margin-top: 3px;"
              v-decorator="[
                'captcha',
                {
                  rules: [{ required: true, message: '请输入注册验证码' }],
                },
              ]"
              placeholder="请输入注册验证码"
            >
            </a-input>
            <a-button
              id="register-captcha-button"
              html-type="button"
              :disabled="isCaptcha"
              @click="registerEmailCaptcha"
            >
              {{ captcha }}
            </a-button>
          </a-form-item>
          <!-- 登录密码 -->
          <a-form-item label="管理员登录密码">
            <a-input-password
              v-decorator="[
                'password',
                {
                  rules: [
                    { required: true, message: '请输入登录密码' },
                    { min: 8, message: '请输入8~12位密码' },
                    { max: 12, message: '请输入8~12位密码' },
                  ],
                },
              ]"
              type="password"
              placeholder="请输入登录密码"
            >
            </a-input-password>
          </a-form-item>
          <!-- 二次确认 -->
          <a-form-item label="二次确认密码">
            <a-input-password
              v-decorator="[
                'secondaryPassword',
                {
                  rules: [
                    { required: true, message: '请输入二次确认密码' },
                    { min: 8, message: '请输入8~12位密码' },
                    { max: 12, message: '请输入8~12位密码' },
                  ],
                },
              ]"
              type="password"
              placeholder="请输入二次确认密码"
            >
            </a-input-password>
          </a-form-item>
          <!-- 注册按钮 -->
          <a-form-item :wrapper-col="{ span: 12, offset: mobile ? 0 : 6 }">
            <a-button
              style="width: 100%; margin-bottom: 13px"
              type="primary"
              html-type="submit"
              :loading="isLoad"
            >
              立即注册
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "Register",
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "register" });
  },
  data() {
    return {
      captcha: "获取验证码",
      isLoad: false,
      isCaptcha: false,
    };
  },
  computed: {
    mobile() {
      return this.$mobile;
    },
  },
  methods: {
    ...mapActions("user", {
      register: "register",
      emailCaptcha: "emailCaptcha",
    }),
    // 发送邮箱验证码
    registerEmailCaptcha(e) {
      e.preventDefault();
      let email = this.form.getFieldValue("email");
      // 验证邮箱部分
      if (email == undefined) {
        this.$message.error("请输入邮箱");
      } else {
        // 60秒处理时间
        this.isCaptcha = true;
        this.$message.loading("发送邮箱验证码中......", 0);
        let result = this.emailCaptcha(email);
        result
          .then((value) => {
            let time60 = 60;
            let _this = this;
            this.captcha = time60;
            let count = setInterval(function () {
              if (time60 != 0) {
                time60 -= 1;
                _this.captcha = time60;
              } else {
                clearInterval(count);
                _this.isCaptcha = false;
                _this.captcha = "获取验证码";
              }
            }, 1000);
            this.$notification.open({
              message: "验证码已发送至邮箱",
            });
          })
          .catch((error) => {
            this.$message.error("验证码发送失败");
          });
      }
    },
    // 注册表单
    registSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // 密码二次校验
          if (values.password == values.secondaryPassword) {
            this.isLoad = true;
            this.$message.loading("申请中......", 0);
            let result = this.register(values);
            result
              .then((value) => {
                this.$message.success("申请成功");
                this.$bus.$emit("switchLoginRegister", "login");
                this.$router.replace({
                  name: "Login",
                });
              })
              .catch((error) => {
                this.isLoad = false;
              });
          } else {
            this.$message.error("两次密码不一致");
          }
        }
      });
    },
  },
};
</script>

<style scoped>
#register-layout {
  background: #fff;
}
#register-main-layout {
  margin: 30px auto;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 6px 0 rgb(0 0 0 / 20%);
}
#register-form-layout {
  margin: 30px auto;
}
#register-captcha-button {
  width: 41%;
  float: right;
  text-align: center;
  margin-top: 3px;
}
</style>